Me encantaría tener una barra de búsqueda en el componente "Seleccionar" de la base nativa de la biblioteca en react-native.
He intentado agregar un componente "TextInput" dentro del componente "Seleccionar". En la interfaz de usuario, se alinea perfectamente, pero cuando hago clic en "TextInput", se selecciona y la lista se despliega.
El siguiente es el código que probé:
<Select w={w} h={h} variant="outline" selectedValue={selectedValue} minWidth="200" // borderColor={primaryColor} accessibilityLabel={accessibilityLabel?accessibilityLabel: "Choose Service" } placeholder={placeholder?placeholder: "Choose Service"} _selectedItem={{ bg:"coolGray.200", // endIcon: <CheckIcon size="5" /> }} mt={1} onValueChange={onValueChange} > <Input placeholder="Search" variant="filled" width="100%" h={heightPercentageToDP("6%")} borderRadius="10" py="1" px="2" borderWidth="0" /> { data?.map(item => { return( <Select.Item label={item.label} value={item.value} /> ) }) } </Select>El cuadro de Select de base nativa tiene prop _actionSheetBody, contiene IFlatListProps para que pueda usar ListHeaderComponent allí. Entonces puede usar de esta manera.
Utiliza un estado para guardar el valor de búsqueda:
const [searchValue, setSearchValue] = React.useState<string>('');
Editar cuadro de selección
`
<Select w={w} h={h} variant="outline" selectedValue={selectedValue} minWidth="200" accessibilityLabel={accessibilityLabel?accessibilityLabel: "Choose Service" } placeholder={placeholder?placeholder: "Choose Service"} _selectedItem={{ bg:"coolGray.200", // endIcon: <CheckIcon size="5" /> }} mt={1} onValueChange={onValueChange} _actionSheetBody={{ ListHeaderComponent: <FormControl px={3} mb={3}> <Input px={15} py={2} fontSize={16} value={searchValue} placeholder="" _focus={{ bg: colors.white['50'], borderColor: 'darkBlue.600' }} type='text' onChangeText={(value: string) => { setSearchValue(value); }} /> </FormControl> }} > <Input placeholder="Search" variant="filled" width="100%" h={heightPercentageToDP("6%")} borderRadius="10" py="1" px="2" borderWidth="0" /> { (data && data.length)?data.filter((item)=>{ // you filter with searchValue return true; }).map(item => { return( <Select.Item label={item.label} value={item.value} /> ) }) } </Select>